<template>
    <div class="CollapseWrap">
        <van-collapse v-model="activeName" accordion>
            <template v-if="indexs <= 2">
                <van-collapse-item :title="item.name" v-for="(item, index) in list" :key="item.id + index"
                    :name="item.id">
                    <template v-if="Array.isArray(item.child) && item.child.length > 0">
                        <Collapse :list="item.child" :indexs="indexs + 1"></Collapse>
                    </template>
                    <template v-else>
                        <p>{{ item.name }}</p>
                    </template>
                </van-collapse-item>
            </template>
            <template v-else>
                <van-row>
                    <van-cell :title="item.name" icon="records" v-for="item in list" :key="item.id" :clickable="true"
                        @click="handClick(item.id, item.name)">
                        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
                        <template #right-icon>
                            <van-icon name="play" class="plau" style="color:#035dff;" />
                        </template>
                    </van-cell>
                </van-row>
            </template>
        </van-collapse>
    </div>
</template>

<script>
export default {
    name: 'Collapse',
    props: {
        list: {
            type: [Object, Array]
        },
        indexs: {
            type: Number,
        }
    },
    data() {
        return {
            activeName: ''
        }
    },
    mounted() {
    },
    methods: {
        handClick(id, n) {
            let strUrl = "/mobileScreen"
            this.$router.push({ path: strUrl, query: { id: id, name: n } });
        }
    },
    watch: {
        list: {
            handler(nVal, oVal) {
                if (this.indexs == 1) {
                    if (Array.isArray(nVal) && nVal.length > 0) {
                        this.activeName = nVal[0].id
                    }
                }
            },
            immediate: true,
            deep: true,
        }
    }
}
</script>

<style lang="less" scoped>
.van-row {
    ::v-deep {
        .van-cell {
            padding: 10px 4px;
        }

        .van-cell__left-icon {
            color: #035dff;
        }

        .van-icon-play {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #035dff;
        }
    }
}
</style>